<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商城</title>
		<link rel="icon" href="../static/img/01.png" type="image/x-icon"/>
		<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css"/>
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="header"></div>
		<!-- 商品内容 -->
		<div class="m-4">
			<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 m-auto" data-role="listview" id="product"></div>
		</div>
		<!-- 页脚 -->
		<div class="mt-5" id="footer"></div>
	</body>
	<!-- js -->
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/jquery.tmpl.js"></script>
	<script src="../static/js/bootstrap.bundle.min.js"></script>
	<script src="../static/js/TSMSys.hotelsAjax.js"></script>
	<script>
		$(function(){
			$('#header').load('header');
			$('#footer').load('footer');
		})
	</script>
	<script data-role="listview" id="myTemplate" type="text/x-jquery-tmpl">
		<div class="col pt-5 text-center">
			<a href="${link}" class="text-decoration-none">
				<div class="m-3">
					<img src="${pic}" alt="${title}">
				</div>
				<h5 class="text-black-50 font-weight-bold mt-2">${title}</h5>
				<strong class="text-danger" style="font-size: x-large;">￥${price}  </strong>
				<s class="text-black-50 font-weight-bold mt-2">￥${value} </s>
			</a>
		</div>
	</script>
	<script>
		$.ajax({
			type:'get',
			url: "http://localhost:8080/maoyan/moviesproduct",
			dataType: "json",
			data: {},
			success:function(data){
				console.log(data);
				// 将json对象载入模板,并插入到#product末尾中去
				$('#myTemplate').tmpl(data).appendTo('#product');
			},
			error:function(){
				alert('failed!');
			},
		});
	</script>
</html>
